/*
URL：
    正在热映：http://bufantec.com/api/douban/movie/in_theaters
    即将上映：http://bufantec.com/api/douban/movie/coming_soon
    TOP250：http://bufantec.com/api/douban/movie/top250

    发送的参数： 当前页 start 默认0  发送每页的数量 limit 默认10

    练习要求：
        1. 实现切换类型
        2. 实现分页  ?start=xx&limit=xx
        3. 实现响应式
        4. 字段名：title longtime genres数组 rating_average平均分
        director导演数组 scriptwriter编剧数组  small/medium/large 海报
        字段名超出行变成 ...
*/

;(function (w, $) {
    function MovieDay(container, moviePath, setting) {
        this.container = document.querySelector(container);
        // 电影路径
        this.moviePath = moviePath;
        // 当前分类
        this.classification = 0;
        // 当前页面数
        this.pageNumber = 1,
        // 整个页面ajax数据
        this.data = null;
        // 详情页的ajax数据
        this.data1 = null;
        // 是否重新加载整个页面
        this.reLoad = 1;
        // 整个页面的xhr对象
        this.xhr = null;
        // 详情页的ajax对象
        this.xhr1 = null;
        // 设置默认值
        this.setting = Object.assign({
            bgcolor: 'white',
            pageSize: 10,
        }, setting)
        // 初始化页面
        this.init();
    }
    // 原型扩展函数
    MovieDay.prototype.extends = function (obj) {
        for (var i in obj) {
            if (!(i in MovieDay.prototype)) {
                MovieDay.prototype[i] = obj[i]
            }
        }
    }
    // 挂载函数
    MovieDay.prototype.extends({
        // 启动引擎
        init() {
            // 分类初始化  分类永远不变
            this.initClassification();
            // 初始化页面
            this.initPage();
            this.initDetailPage();
        },
        // 初始化分类
        initClassification() {
            // 初始化分类
            var str = 
                `
                    <nav>
                        <div class="header">
                            <div class="classification">
                                <div class="classification-xx classification-active">正在热映</div>
                                <div class="classification-xx">即将上映</div>
                                <div class="classification-xx">top250</div>
                            </div>
                        </div>
                    </nav>
                `;
                $(this.container).append(str);
            // 添加分类的点击事件
            var that = this;
            $('.classification').on('click', '.classification-xx', function () {
                // 点击样式改变
                $('.classification-active').removeClass('classification-active');
                $(this).addClass('classification-active');
                // 将页码初始化
                that.pageNumber = 1;
                // 更改电影详细
                var index = $(this).index();
                that.classification = index;
                // 重新open与send
                that.xhr.open('GET', `http://bufantec.com/api/douban/movie/${that.moviePath[that.classification]}?start=${that.pageNumber}&limit=${that.setting.pageSize}`);
                that.xhr.send(null);
                // 将重新加载页面
                that.reLoad = 1;
            })
        },
        // 初始化页面
        initPage() {
            var that = this;
            var xhr = new XMLHttpRequest();
            // 将xhr挂载全局
            this.xhr = xhr;
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    var content = xhr.responseText;
                    that.data = JSON.parse(content).data;
                    console.log('is ok!');
                    // 如果只是点击页码
                    if (that.reLoad) {
                        // 初始化页码
                        that.initPageNums();
                        // 挂载页码点击事件
                        $('.pageNumber').on('click', '.pageNumber-xx', function () {
                            // 不用刷新整个页面
                            that.reLoad = 0;
                            var index = $(this).index() + 1;
                            // 更改当前页数
                            that.pageNumber = index;
                            // 更改分页样式
                            $('.pageNumber-active').removeClass('pageNumber-active');
                            $(this).addClass('pageNumber-active');
                            // 重新获取ajax 渲染详情
                            that.xhr.open('GET', `http://bufantec.com/api/douban/movie/${that.moviePath[that.classification]}?start=${that.pageNumber}&limit=${that.setting.pageSize}`);
                            that.xhr.send(null);
                        })
                        // 初始化页码选择界面
                        that.initPageChoose();
                        // 挂载more点击事件 点击出现所有分页
                        $('.more').click(function () {
                            $('.more-mask').fadeIn(200).css({
                                display: 'flex',
                            });
                            // 给当前页加上样式
                            $('.page-active').removeClass('page-active');
                            $('.page-xx').eq(that.pageNumber-1).addClass('page-active');
                        })
                        // 点击其他地方关闭分页
                        $('.more-mask').click(function () {
                            console.log('fade');
                            $(this).fadeOut();
                        })
                        // 阻止事件向外扩张 避免失误关闭页面
                        $('.pages').click(function () {
                            event.stopPropagation();
                        })
                        // 所有分页的跳转事件
                        $('.page-xx').click(function () {
                            // 执行页码的点击事件
                            var index = $(this).index();
                            $('.pageNumber-xx').eq(index).click();
                            // 更改分页样式
                            $('.pageNumber-active').removeClass('pageNumber-active');
                            $('.pageNumber-xx').eq(index).addClass('pageNumber-active');
                            // 关闭遮罩层
                            $('.more-mask').fadeOut();
                        })
                    }
                    // 初始化电影列表
                    that.initMovieList();
                }
            }
            xhr.open('GET', `http://bufantec.com/api/douban/movie/${that.moviePath[that.classification]}?start=${that.pageNumber}&limit=${that.setting.pageSize}`);
            xhr.send(null);
        },
        // 初始化页码
        initPageNums() {
            // 挂载页码
            var str = 
                `
                    <div class="pageNum-wraper">
                        <div class="pageNumber">
                `;
            for (var i = 0; i < this.data.totalPage; i++) {
                str += `<div class="pageNumber-xx">${i+1}</div>`
            }
            str += 
                `
                        </div>
                    <div class="more">更多>></div>
                </div>
                `;
            str = str.replace('<div class="pageNumber-xx">', '<div class="pageNumber-xx pageNumber-active">')
            $('.pageNum-wraper').remove();
            $('.header').append(str);
        },
        // 初始化电影列表
        initMovieList() {
            // 挂载电影列表
            var list = this.data.list;
            var that = this;
            var str = ''
            str =
                `
                    <div class="content">
                `;
            for (var i = 0; i < list.length; i++) {
                str += 
                    `
                        <div class="movie-wrapper">
                            <img src="${list[i].small}" alt="">
                            <p><a href="javascript:" class="detail">${list[i].title}</a></p>
                            <p>${this.getArrstr(list[i].genres)}</p>
                            <div class="mask">
                                <div><a href="${list[i].alt}" target="_blank">${list[i].title}</a></div>
                                <div>时长：${list[i].longtime}</div>
                                <div>平均分：${list[i].rating_average}</div>
                                <div>导演：${this.getArrstr(list[i].director)}</div>
                                <div>编剧：${this.getArrstr(list[i].scriptwriter)}</div>
                            </div>
                        </div>
                    `;
            }
            str += 
                `
                        <div class="movie-none"></div>
                        <div class="movie-none"></div>
                        <div class="movie-none"></div>
                    </div>
                `;
            $('.content').remove();
            $(this.container).append(str);
            // 点击标题，出现detail页
            $('.detail').click(function () {
                that.xhr1.open('GET', `http://bufantec.com/api/douban/movie/subject?mId=${list[$(this).parent().parent().index()].mId}`);
                that.xhr1.send(null);
            })
            // 挂载详情hover事件
            $('img').hover(function () {
                // 鼠标在详情上
                var $mask = $(this).closest('.movie-wrapper').children('.mask');
                $mask.fadeIn(200).css({
                    display: 'flex',
                }).parent().css({
                    transition: 'all .4s',
                    transform: 'scale(1.1)',
                })
            })
            // 鼠标移出详情
            $('.movie-wrapper').mouseleave(function () {
                var $mask = $(this).closest('.movie-wrapper').children('.mask');
                $mask.stop().css({
                   display: 'none',
                }).parent().css({
                    transition:'none',
                    transform: 'scale(1)'
                })
            })
        },
        // 初始化页码选择界面
        initPageChoose() {
            var str1 = 
                `
                    <div class="more-mask">
                        <div class="pages">
                `;
            for (var i = 0; i < this.data.totalPage; i++) {
                str1 += `<div class="page-xx">${i+1}</div>`;
            }
            str1 += `</div></div>`;
            str1 = str1.replace('<div class="page-xx">', '<div class="page-xx page-active">')
            // 清除之前的东西
            $('.more-mask').remove();
            $(this.container).append(str1);
        },
        
        // 初始化详情页
        initDetailPage() {
            xhr1 = new XMLHttpRequest();
            this.xhr1 = xhr1;
            var that = this;
            xhr1.onreadystatechange = function () {
                if (xhr1.readyState == 4 && xhr1.status == 200) {
                    var content = xhr1.responseText;
                    that.data1 = JSON.parse(content).data;
                    that.initDetail();
                }
            }
        },
        // 挂载详情页
        initDetail() {
            var str = 
                `
                    <div class="detail-mask">
                        <div class="detail-content">
                            <p class="title">${this.data1.title}</p>
                            <div class="summary">${this.data1.summary}</div>
                        </div>
                    </div>
                `;
            $('.detail-mask').remove();
            $(this.container).append(str);
            // 在页面挂载完成后，让详情页出现
            $('.detail-mask').fadeIn(200).css({
                display: 'flex',
            });
            // 点击其他地方关闭detail页
            $('.detail-mask').click(function () {
                $(this).fadeOut();
            })
            // 阻止事件向外扩张 避免失误关闭detail页
            $('.detail-content').click(function () {
                event.stopPropagation();
            })
        },
        // 获取数组字符串
        getArrstr(arr) {
            if (arr) {
                return arr.join('，')
            }
        },
    })
    w.MovieDay = MovieDay;
})(window, jQuery)